<script setup lang="ts" name="App">
// 模板里面就能用了
import Person from './components/Person.vue';
import { ref } from 'vue';
let ren = ref();
const showH2 = () => {
  // 打印结果中子组件里的a、b、c的ref通通看不见
  console.log(ren.value);
  console.log(ren.value.a);
  // ren.value.showH2();
};
</script>

<template>
  <Person ref="ren" />
  <button @click="showH2">APP组件：测试</button>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
